<template>
  <div class="login-container">
    <!-- 古风背景 -->
    <div class="ancient-background">
      <!-- 山水背景 -->
      <div class="mountain-landscape">
        <div class="mountain-range"></div>
        <div class="mountain-peaks"></div>
        <div class="mountain-shadow"></div>
        <div class="waterfall"></div>
      </div>

      <!-- 云雾效果 -->
      <div class="clouds">
        <div class="cloud" v-for="n in 8" :key="n" :style="getCloudStyle(n)"></div>
      </div>

      <!-- 古风装饰元素 -->
      <div class="ancient-elements">
        <div class="ancient-symbol" :style="{ left: '15%', top: '20%' }">
          <div class="symbol-circle"></div>
          <div class="symbol-center"></div>
        </div>
        <div class="ancient-symbol" :style="{ left: '25%', top: '25%' }">
          <div class="symbol-square"></div>
          <div class="symbol-dot"></div>
        </div>
        <div class="ancient-symbol" :style="{ left: '35%', top: '30%' }">
          <div class="symbol-triangle"></div>
          <div class="symbol-line"></div>
        </div>
        <div class="ancient-symbol" :style="{ left: '45%', top: '25%' }">
          <div class="symbol-diamond"></div>
          <div class="symbol-cross"></div>
        </div>
        <div class="ancient-symbol" :style="{ left: '55%', top: '20%' }">
          <div class="symbol-hexagon"></div>
          <div class="symbol-star"></div>
        </div>
      </div>

      <!-- 古风粒子 -->
      <div class="ancient-particles">
        <div class="particle" v-for="n in 30" :key="n" :style="getParticleStyle(n)"></div>
      </div>
    </div>

    <!-- 系统标题 -->
    <div class="system-title">
      <div class="title-icon">
        <div class="target-icon"></div>
      </div>
      <div class="title-text">
        <h1>数据展示可视化系统</h1>
        <p>Business Data Display Visualization System</p>
      </div>
    </div>

    <!-- 古风登录面板 -->
    <div class="ancient-login-panel">
      <div class="ancient-panel-header">
        <div class="ancient-header-decoration">
          <div class="decoration-left"></div>
          <div class="decoration-center">
            <div class="ancient-logo">
              <div class="logo-symbol"></div>
              <div class="logo-circle"></div>
            </div>
          </div>
          <div class="decoration-right"></div>
        </div>
        <h2>MES管理系统</h2>

      </div>

      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="login-form"
        @submit.prevent="submitForm(ruleFormRef)">
        <!-- 用户名输入 -->
        <div class="ancient-form-group">
          <div class="ancient-input-wrapper">
            <div class="ancient-input-label">
              <div class="label-icon">👤</div>
              <span>用户名</span>
            </div>
            <el-input v-model="ruleForm.userName" placeholder="请输入用户名称" class="ancient-input"
              :class="{ 'input-error': formErrors.userName }" />
          </div>
        </div>

        <!-- 密码输入 -->
        <div class="ancient-form-group">
          <div class="ancient-input-wrapper">
            <div class="ancient-input-label">
              <div class="label-icon">🔒</div>
              <span>密码</span>
            </div>
            <el-input v-model="ruleForm.userPwd" type="password" placeholder="请输入登录密码" class="ancient-input"
              :class="{ 'input-error': formErrors.userPwd }" show-password />
          </div>
        </div>

        <!-- 验证码输入 -->
        <div class="ancient-form-group">
          <div class="ancient-input-wrapper">
            <div class="ancient-input-label">
              <div class="label-icon">🛡️</div>
              <span>验证码</span>
            </div>
            <el-input v-model="ruleForm.captcha" placeholder="请输入右侧校验码" class="ancient-input ancient-captcha-input"
              :class="{ 'input-error': formErrors.captcha }" />
            <div class="ancient-captcha-box" @click="refreshCaptcha">
              {{ captchaCode }}
            </div>
          </div>
        </div>



        <!-- 古风登录按钮 -->
        <el-button type="primary" class="ancient-login-button" @click="submitForm(ruleFormRef)" :loading="isLoading">
          <div class="button-content">
            <div class="button-icon">⚔️</div>
            <span v-if="!isLoading">登录</span>
            <span v-else>登录中...</span>
          </div>
        </el-button>
      </el-form>
    </div>

    <!-- 古风粒子效果 -->
    <div class="ancient-floating-particles">
      <div class="floating-particle" v-for="n in 20" :key="n" :style="getFloatingParticleStyle(n)"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router'

import { Sunny } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus'
import { loading } from 'vxe-pc-ui'
import MesHelp from '../../Http/MesHelp'
// ==================== 接口定义 ====================
interface RuleForm {
  userName: string
  userPwd: string
  captcha: string
}

interface FormOptions {
  rememberUsername: boolean
  rememberPassword: boolean
  rememberCaptcha: boolean
}

interface FormErrors {
  userName: boolean
  userPwd: boolean
  captcha: boolean
}

// ==================== 响应式数据 ====================
const ruleFormRef = ref<FormInstance>()
const isLoading = ref(false)

const ruleForm = reactive<RuleForm>({
  userName: 'rj',
  userPwd: '1',
  captcha: ''
})

const formOptions = reactive<FormOptions>({
  rememberUsername: false,
  rememberPassword: false,
  rememberCaptcha: false
})

const formErrors = reactive<FormErrors>({
  userName: false,
  userPwd: false,
  captcha: false
})

// 验证码相关
const captchaCode = ref('ABCD')

// ==================== 表单验证规则 ====================
const rules = reactive<FormRules<RuleForm>>({
  userName: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
  ],
  userPwd: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '验证码不能为空', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value.toUpperCase() !== captchaCode.value) {
          callback(new Error('验证码不正确'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

// ==================== 方法定义 ====================
/**
 * 生成随机验证码
 * 生成4位随机字母验证码
 */
const generateCaptcha = (): string => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
  let result = ''
  for (let i = 0; i < 4; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return result
}

/**
 * 刷新验证码
 * 点击验证码时重新生成
 */
const refreshCaptcha = () => {
  captchaCode.value = generateCaptcha()
  ruleForm.captcha = ''
  formErrors.captcha = false
}

/**
 * 键盘事件处理
 * 监听回车键触发登录
 */
const handleKeyPress = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    submitForm(ruleFormRef.value)
  }
}


/**
 * 获取云雾样式
 * 为云雾效果生成随机位置和动画参数
 */
const getCloudStyle = (index: number) => {
  const size = Math.random() * 120 + 60
  const left = Math.random() * 120 - 10
  const top = Math.random() * 40 + 10
  const animationDelay = Math.random() * 10
  const animationDuration = Math.random() * 30 + 20

  return {
    left: `${left}%`,
    top: `${top}%`,
    width: `${size}px`,
    height: `${size * 0.6}px`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  }
}

/**
 * 获取粒子样式
 * 为背景粒子生成随机位置和动画延迟
 */
const getParticleStyle = (index: number) => {
  const size = Math.random() * 3 + 1
  const left = Math.random() * 100
  const top = Math.random() * 100
  const animationDelay = Math.random() * 10
  const animationDuration = Math.random() * 10 + 10

  return {
    left: `${left}%`,
    top: `${top}%`,
    width: `${size}px`,
    height: `${size}px`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  }
}

/**
 * 获取浮动粒子样式
 * 为古风浮动粒子生成随机位置和动画参数
 */
const getFloatingParticleStyle = (index: number) => {
  const size = Math.random() * 4 + 2
  const left = Math.random() * 100
  const top = Math.random() * 100
  const animationDelay = Math.random() * 15
  const animationDuration = Math.random() * 20 + 15

  return {
    left: `${left}%`,
    top: `${top}%`,
    width: `${size}px`,
    height: `${size}px`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  }
}

/**
 * 表单提交处理
 * 验证表单并调用登录API
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  // 重置错误状态
  Object.keys(formErrors).forEach(key => {
    formErrors[key as keyof FormErrors] = false
  })

  await formEl.validate((valid, fields) => {
    if (valid) {
      // 验证码校验
      if (ruleForm.captcha.toUpperCase() !== captchaCode.value) {
        ElMessage.error("验证码错误，请重新输入")
        refreshCaptcha()
        return
      }

      isLoading.value = true

      // 模拟API调用延迟
      setTimeout(() => {
        MesHelp.post("/api/User/UserLogin", {
          userName: ruleForm.userName,
          userPwd: ruleForm.userPwd
        }).then(res => {
          if (res.data.code == 200) {
            ElMessage.success("登录成功")
            console.log(res.data.data)

            // 保存用户信息到本地存储
            localStorage.setItem("userNickname", res.data.data.userNickname)
            localStorage.setItem("roleName", res.data.data.roleName)
            localStorage.setItem("departmentName", res.data.data.departmentName)
            
            // 保存用户权限信息
            if (res.data.data.permissions && res.data.data.permissions.length > 0) {
              localStorage.setItem("userPermissions", JSON.stringify(res.data.data.permissions))
            } else {
              localStorage.removeItem("userPermissions")
            }
            
  // 登录成功，写JWT的 token到本地
        window.localStorage.setItem("token", res.data.data.token);
        // 数据提交后端要加入新的Token值
        axios.defaults.headers.common["Authorization"] =
            "Bearer " + res.data.data.token;
            // 如果选择了记住密码，保存到本地存储
            if (formOptions.rememberPassword) {
              localStorage.setItem("rememberedUsername", ruleForm.userName)
            }


            // 跳转到主页面
            router.push("/pro")
          } else {
            ElMessage.error(res.data.message)
            // 登录失败时刷新验证码
            refreshCaptcha()
          }
        }).catch(error => {
          console.error('登录请求失败:', error)
          ElMessage.error('网络连接失败，请检查网络设置')
          refreshCaptcha()
        }).finally(() => {
          isLoading.value = false
        })
      }, 1000) // 1秒延迟模拟网络请求
    } else {
      console.log('表单验证失败:', fields)
      // 标记有错误的字段
      if (fields) {
        Object.keys(fields).forEach(key => {
          formErrors[key as keyof FormErrors] = true
        })
      }
    }
  })
}

/**
 * 重置表单
 * 清空所有输入并重置状态
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()

  // 重置错误状态
  Object.keys(formErrors).forEach(key => {
    formErrors[key as keyof FormErrors] = false
  })

  // 刷新验证码
  refreshCaptcha()
}

// ==================== 生命周期 ====================
onMounted(() => {
  // 页面加载时生成初始验证码
  refreshCaptcha()

  // 检查是否有记住的用户名
  const rememberedUsername = localStorage.getItem("rememberedUsername")
  if (rememberedUsername) {
    ruleForm.userName = rememberedUsername
    formOptions.rememberPassword = true
  }
  // 添加键盘事件监听
  window.addEventListener('keypress', handleKeyPress)
})
</script>


<style scoped>
/* ==================== 古风主容器样式 ==================== */
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg,
      #1a1a2e 0%,
      #16213e 25%,
      #0f3460 50%,
      #533483 75%,
      #7209b7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Microsoft YaHei', 'SimSun', serif;
}

/* ==================== 古风背景 ==================== */
.ancient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 山水背景 */
.mountain-landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
}

.mountain-range {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(139, 69, 19, 0.4) 30%,
      rgba(160, 82, 45, 0.5) 60%,
      rgba(101, 67, 33, 0.6) 100%);
  clip-path: polygon(0% 100%, 0% 60%, 20% 40%, 40% 50%, 60% 30%, 80% 45%, 100% 35%, 100% 100%);
  animation: ancientMountainGlow 8s ease-in-out infinite;
}

.mountain-peaks {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(255, 215, 0, 0.3) 20%,
      rgba(255, 140, 0, 0.4) 40%,
      rgba(255, 69, 0, 0.3) 60%,
      transparent 100%);
  clip-path: polygon(0% 100%, 0% 50%, 15% 35%, 35% 45%, 55% 25%, 75% 40%, 100% 30%, 100% 100%);
  animation: ancientPeakGlow 6s ease-in-out infinite;
}

.mountain-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 40%,
      rgba(0, 0, 0, 0.5) 100%);
  clip-path: polygon(0% 100%, 0% 70%, 20% 50%, 40% 60%, 60% 40%, 80% 55%, 100% 45%, 100% 100%);
}

.waterfall {
  position: absolute;
  right: 15%;
  top: 20%;
  width: 4px;
  height: 40%;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(200, 200, 255, 0.6) 50%,
      transparent 100%);
  border-radius: 2px;
  animation: ancientWaterfall 3s ease-in-out infinite;
}

/* 云雾效果 */
.clouds {
  position: absolute;
  width: 100%;
  height: 100%;
}

.cloud {
  position: absolute;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.4), transparent);
  border-radius: 50%;
  animation: ancientCloudFloat linear infinite;
}

/* 古风装饰元素 */
.ancient-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.ancient-symbol {
  position: absolute;
  width: 60px;
  height: 60px;
  animation: ancientSymbolFloat 4s ease-in-out infinite;
}

.ancient-symbol:nth-child(1) {
  animation-delay: 0s;
}

.ancient-symbol:nth-child(2) {
  animation-delay: 0.8s;
}

.ancient-symbol:nth-child(3) {
  animation-delay: 1.6s;
}

.ancient-symbol:nth-child(4) {
  animation-delay: 2.4s;
}

.ancient-symbol:nth-child(5) {
  animation-delay: 3.2s;
}

/* 古风符号样式 */
.symbol-circle {
  width: 100%;
  height: 100%;
  border: 3px solid #ffd700;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
  animation: ancientSymbolGlow 3s ease-in-out infinite;
}

.symbol-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #ffd700, #ff8c00);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.symbol-square {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ffd700, #ff8c00);
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

.symbol-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.symbol-triangle {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ffd700, #ff8c00);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

.symbol-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 3px;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.symbol-diamond {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ffd700, #ff8c00);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

.symbol-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 3px;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.symbol-cross::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 30px;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.symbol-hexagon {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ffd700, #ff8c00);
  clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

.symbol-star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: #ffffff;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform: translate(-50%, -50%);
}

/* 古风粒子 */
.ancient-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 1px, transparent 1px);
  border-radius: 50%;
  animation: ancientParticleFloat linear infinite;
}

/* 古风浮动粒子 */
.ancient-floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.floating-particle {
  position: absolute;
  background: rgba(255, 215, 0, 0.6);
  border-radius: 50%;
  animation: ancientFloatingParticleFloat linear infinite;
}

/* ==================== 系统标题 ==================== */
.system-title {
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
}

.title-icon {
  width: 80px;
  height: 80px;
  position: relative;
}

.target-icon {
  width: 100%;
  height: 100%;
  border: 3px solid #00ffff;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
  animation: targetPulse 3s ease-in-out infinite;
}

.target-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  border: 2px solid #00ffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.target-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  background: #00ffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.title-text h1 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
  animation: titleGlow 2s ease-in-out infinite alternate;
}

.title-text p {
  color: #cccccc;
  font-size: 1rem;
  margin: 5px 0 0 0;
  opacity: 0.8;
}

/* ==================== 古风登录面板 ==================== */
.ancient-login-panel {
  position: relative;
  z-index: 10;
  background: linear-gradient(135deg,
      rgba(139, 69, 19, 0.9) 0%,
      rgba(160, 82, 45, 0.95) 50%,
      rgba(101, 67, 33, 0.9) 100%);
  backdrop-filter: blur(15px);
  border: 3px solid rgba(255, 215, 0, 0.4);
  border-radius: 20px;
  padding: 25px;
  width: 350px;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 215, 0, 0.2);
  animation: ancientPanelSlideIn 1s ease-out;
}

.ancient-panel-header {
  text-align: center;
  margin-bottom: 30px;
}

.ancient-header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  gap: 20px;
}

.decoration-left,
.decoration-right {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
  position: relative;
}

.decoration-left::before,
.decoration-right::before {
  content: '';
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.decoration-left::before {
  left: 0;
}

.decoration-right::before {
  right: 0;
}

.decoration-center {
  position: relative;
}

.ancient-logo {
  width: 50px;
  height: 50px;
  position: relative;
}

.logo-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: linear-gradient(45deg, #ffffff, #c0c0c0);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 3px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.logo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ancient-panel-header h2 {
  color: #ffd700;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 10px 0;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  font-family: 'Microsoft YaHei', serif;
}

.ancient-subtitle {
  color: #ff8c00;
  font-size: 0.9rem;
  opacity: 0.8;
  font-family: 'SimSun', serif;
}

/* ==================== 古风表单样式 ==================== */
.login-form {
  width: 100%;
}

.ancient-form-group {
  margin-bottom: 20px;
}

.ancient-input-wrapper {
  position: relative;
}

.ancient-input-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #ffd700;
  font-size: 0.9rem;
  font-weight: 500;
}

.label-icon {
  font-size: 1.1rem;
}

.ancient-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 10px;
  color: #ffffff;
  transition: all 0.3s ease;
  padding: 12px 15px;
  font-size: 1rem;
}

.ancient-input:focus {
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  background: rgba(0, 0, 0, 0.5);
}

.ancient-input.input-error {
  border-color: #ff4444;
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
}

.ancient-captcha-input {
  width: calc(100% - 100px);
  margin-right: 10px;
}

.ancient-captcha-box {
  width: 80px;
  height: 40px;
  background: linear-gradient(135deg, #ffffff, #f0f0f0);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  border: 2px solid #ffd700;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.ancient-captcha-box:hover {
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.ancient-form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.ancient-option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d4af37;
  font-size: 0.9rem;
}

.ancient-checkbox {
  color: #ffd700;
}

.ancient-forgot-password {
  color: #ffd700;
  cursor: pointer;
  transition: color 0.3s ease;
  text-decoration: none;
}

.ancient-forgot-password:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.ancient-login-button {
  width: 100%;
  height: 55px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border: none;
  border-radius: 12px;
  color: #000000;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.ancient-login-button:hover {
  background: linear-gradient(135deg, #ff8c00, #ffd700);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 215, 0, 0.5);
}

.ancient-login-button:active {
  transform: translateY(-1px);
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.button-icon {
  font-size: 1.3rem;
}

/* ==================== 粒子效果 ==================== */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.particle {
  position: absolute;
  background: rgba(0, 255, 255, 0.6);
  border-radius: 50%;
  animation: particleFloat linear infinite;
}

/* ==================== 古风动画定义 ==================== */
@keyframes ancientMountainGlow {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes ancientPeakGlow {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes ancientWaterfall {

  0%,
  100% {
    opacity: 0.8;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(5px);
  }
}

@keyframes ancientCloudFloat {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  10% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translateX(calc(100vw + 100px));
    opacity: 0;
  }
}

@keyframes ancientSymbolFloat {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(5deg);
  }
}

@keyframes ancientSymbolGlow {

  0%,
  100% {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.8);
    transform: scale(1.05);
  }
}

@keyframes ancientParticleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.9;
  }

  90% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes ancientFloatingParticleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 0.8;
    transform: translateY(80vh) rotate(72deg) scale(1);
  }

  80% {
    opacity: 0.8;
    transform: translateY(20vh) rotate(288deg) scale(1);
  }

  100% {
    transform: translateY(-100px) rotate(360deg) scale(0.5);
    opacity: 0;
  }
}

@keyframes ancientPanelSlideIn {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==================== 古风响应式设计 ==================== */
@media (max-width: 768px) {
  .ancient-login-panel {
    width: 90%;
    margin: 20px;
    padding: 30px 20px;
  }

  .system-title {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 30px;
    justify-content: center;
  }

  .title-text h1 {
    font-size: 2rem;
  }

  .mountain-landscape {
    height: 50%;
  }

  .ancient-elements {
    display: none;
  }

  .ancient-panel-header h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .title-text h1 {
    font-size: 1.5rem;
  }

  .title-text p {
    font-size: 0.8rem;
  }

  .ancient-login-panel {
    padding: 20px 15px;
  }

  .ancient-panel-header h2 {
    font-size: 1.3rem;
  }

  .ancient-subtitle {
    font-size: 0.8rem;
  }

  .ancient-input {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .ancient-login-button {
    height: 50px;
    font-size: 1.1rem;
  }
}
</style>
